<template>
    <div class="upload-page">
        <div class="nav-back" @click="goBack">
            <i class="el-icon-arrow-left"></i>
        </div>
        <div class="upload-cont">
            <div class="upload-box marg-B3">
                <div class="t-cen">
                    <!-- <el-upload class="avatar-uploader" :auto-upload="false" action="http://101.200.167.127:8111/api/user/profile" :show-file-list="false" :http-request="httpRequest">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload> -->
                    <el-upload
                    class="avatar-uploader"
                    action="http://101.200.167.127:8111/api/user/profile"
                    :show-file-list="false"
                    :headers="headers"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <img v-else src="../assets/images/head-pic.png" alt="">
                    </el-upload>
                    <p style="color:#808080;">上传头像</p>
                </div>
                <div class="items flex f-be">
                    <div class="flex f-mi" v-if="isEdit"><span style="width: 60px;">昵称：</span><el-input type="text" v-model="nickname" placeholder="请输入昵称"></el-input></div>
                    <div v-else>昵称：{{ userInfo.nickname }}</div>
                    <div @click="editClick"><img class="edit-icon" src="../assets/images/edit-icon.png" /></div>
                </div>
                <div class="items marg-B1">姓名：{{ userInfo.name }}</div>
                <div>部门：{{ userInfo.branch }}</div>
            </div>
            <div class="btn-box">
                <el-button class="btn b-bg" type="primary" @click="handleSure">保存</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import {request} from "@/assets/js/utils/request";
import mixins from '@/assets/js/mixin'
export default{
    mixins: [mixins],
    data() {
        return {
            imageUrl: '',
            fileList: [],
            isEdit: false,
            userInfo: {},
            nickname: '',
            headers: {
                'token': this.$store.state.token
            }
        }
    },
    created() {
        this.initData()
    },
    methods: {
        editClick() {
            this.isEdit = !this.isEdit
        },
        httpRequest(item) {
            const formData = new FormData();
            formData.append('file',item.file)
            request({
				url: `/user/profile`,
				method: 'POST',
                name: 'file',
                filePath: formData
                // filePath: filePath[il.path,
			}).then(res => {
				if(res.code == 200) {
                    this.$message({
                        message: '上传成功',
                        type: 'success'
                    });
				} else {
					this.$message.error(res.message);
				}
			})
        },
        handleSure() {
            const formData = new FormData();
            formData.append('nickname',this.nickname)
            request({
				url: `/user/nickname`,
				method: 'POST',
                data: formData
			}).then(res => {
				if(res.code == 200) {
					this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.goBack()
				} else {
					this.$message.error(res.message);
				}
			})
        },
        initData() {
            // 获取用户信息
            request({
                url: '/user/info',
                method: 'GET'
            }).then(res => {
                if(res.code == 200) {
                    this.userInfo = res.data
                    this.imageUrl = res.data.profile
                } else {
                    this.$message.error(res.message);
                }
            })
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            // const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            // if (!isJPG) {
            //     this.$message.error('上传头像图片只能是 JPG 格式!');
            // }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isLt2M;
        }
    }
}
</script>
<style lang="less" scoped>
.upload-page{
    padding: 20px;
    background: #fff;
    .upload-cont{
        width: 450px;
        padding: 30px;
        border: 1px solid #E5E5E5;
        margin: 0 auto;
    }
    .items{
        padding: 20px 0;
        margin-bottom: 20px;
        border-bottom: 1px solid #E5E5E5;
    }
    .items::last-child{
        border-bottom: none;
    }
    .el-select{
        width: 100%;
    }
    .btn-box{
        text-align: center;
        margin-top: 30px;
        .btn{
            font-size: 14px;
            padding: 0;
            color: #fff;
            width: 160px;
            height: 32px;
            text-align: center;
            line-height: 32px;
            border:none;
            border-radius: 25px;
        }
        .b-bg{
            background: #2967E3;
        }
        .l-bg{
            background: #00BAAD;
        }
        .gray{
            background: #A6A6A6;
        }
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 120px;
        height: 120px;
        display: block;
    }
}
</style>
